<template>
	<div class="wrapper" v-if="isShow">
		<!-- header部分 -->
		<header>
			<p>确认订单</p>
		</header>
		<!-- 订单信息部分 -->
		<div class="order-info" @click="jumpToUserAddress">
			<h5>订单配送至：</h5>
			<div class="order-info-address">
				<p>{{ deliveryAddress.address }}</p>
				<i class="fa fa-angle-right"></i>
			</div>
			<p>{{ name }} {{ deliveryAddress.contactTel }}</p>
		</div>
		<h3>{{ cartList[0].business.businessName }}</h3>
		<!-- 订单明细部分 -->
		<ul class="order-detailed">
			<li v-for="c in cartList" :key="c.cartId">
				<div class="order-detailed-left">
					<img :src="c.food.foodImg">
					<p>{{ c.food.foodName }} x {{ c.quantity }}</p>
				</div>
				<p>&#165;{{ c.food.foodPrice }}</p>
			</li>
		</ul>
		<div class="order-deliveryfee">
			<p>配送费</p>
			<p>&#165;{{ cartList[0].business.deliveryPrice }}</p>
		</div>
		<!-- 合计部分 -->
		<div class="total">
			<div class="total-left">
				&#165{{ totalPrice }}
			</div>
			<div class="total-right" @click="createOrders">
				去支付
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Orders',
	data: function () {
		return {
			businessId: this.$route.query.businessId,
			cartList: [],
			isShow: false,
			deliveryAddress: {
				contactName: '',
				contactSex: '',
				contactTel: '',
				address: '',
			},
			daId: this.$route.query.daId
		}
	},
	created: function () {
		// 如果登录后视图直接访问订单确认页面，需要将用户导航到首页
		if (this.businessId == undefined) {
			this.$router.push('/index');
		}

		// 页面加载时请求购物车数据
		this.listCart();
		// console.log('daId:' + daId);
		// 页面加载时获取用户及用户地址信息
		if (this.daId != undefined) {
			this.getDeliveryAddressById();
		}


	},
	methods: {

		// 创建订单
		createOrders() {
			let that = this;
			let url = 'OrdersController/createOrders';
			let orders = {
				userId: this.$sessionGet().userId,
				businessId: this.businessId,
				daId: this.daId,
				orderTotal: this.totalPrice
			};
			this.$axios.post(url, this.$qs.stringify(orders))
				.then(resp => {
					let orderId = resp.data;
					if (orderId > 0) {
						this.$router.push({
							path: '/payment',
							query: {
								orderId
							}
						});
					}
				})
				.catch(err => {
					console.log(err);
				})
		},

		// 跳转到地址管理页面
		jumpToUserAddress: function () {
			this.$router.push({
				path: '/userAddress',
				query: {
					businessId: this.businessId
				}
			});
		},

		// 获取用户及用户地址信息
		getDeliveryAddressById: function () {
			let that = this;
			let url = 'DeliveryAddressController/getDeliveryAddressById' + '?daId=' + this.daId;
			this.$axios.get(url)
				.then(resp => {
					that.deliveryAddress = resp.data;
					// console.log('getDeliveryAddressById:'+resp.data);

				})
				.catch(err => {
					console.log(err);
				})
		},

		// 页面加载时请求购物车数据
		listCart: function () {
			let { userId } = this.$sessionGet();
			let that = this;
			let url = 'CartController/listCart' + '?businessId=' + that.businessId + '&userId=' + userId;
			this.$axios.get(url)
				.then(resp => {
					that.cartList = resp.data;
					// console.log(that.cartList);
					that.isShow = true;
				})
				.catch(err => {
					console.log(err);
				})
		}
	},
	computed: {
		// 计算购物车商品总价
		totalPrice: function () {
			let result = 0;
			for (let c of this.cartList) {
				result += c.quantity * c.food.foodPrice;
			}
			result += this.cartList[0].business.deliveryPrice;
			return result
		},
		// 称谓后缀过滤器的计算方法替代形式
		name() {
			let da = this.deliveryAddress;
			if (da.contactSex == '') {
				return ''
			}
			if (da.contactSex == 1) {
				return da.contactName + "先生";
			}
			if (da.contactSex == 0) {
				return da.contactName + "女士";
			}
		}
	},
	// 本地（局部）过滤器
	filters: {
		sexFilter(contactSex) {
			if (contactSex == 1) {
				return '先生';
			}
			if (contactSex == 0) {
				return '女士';
			}

		}
	}
}
</script>

<style scoped="scoped">
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper .order-info {
	/*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
	width: 100%;
	margin-top: 12vw;
	background-color: #0097EF;
	box-sizing: border-box;
	padding: 2vw;
	color: #fff;
}

.wrapper .order-info h5 {
	font-size: 3vw;
	font-weight: 300;
}

.wrapper .order-info .order-info-address {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
	margin: 1vw 0;
}

.wrapper .order-info .order-info-address p {
	width: 90%;
	font-size: 5vw;
}

.wrapper .order-info .order-info-address i {
	font-size: 6vw;
}

.wrapper .order-info p {
	font-size: 3vw;
}

.wrapper h3 {
	box-sizing: border-box;
	padding: 3vw;
	font-size: 4vw;
	color: #666;
	border-bottom: solid 1px #DDD;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailed {
	width: 100%;
}

.wrapper .order-detailed li {
	width: 100%;
	height: 16vw;
	box-sizing: border-box;
	padding: 3vw;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-detailed li .order-detailed-left {
	display: flex;
	align-items: center;
}

.wrapper .order-detailed li .order-detailed-left img {
	width: 10vw;
	height: 10vw;
}

.wrapper .order-detailed li .order-detailed-left p {
	font-size: 3.5vw;
	margin-left: 3vw;
}

.wrapper .order-detailed li p {
	font-size: 3.5vw;
}

.wrapper .order-deliveryfee {
	width: 100%;
	height: 16vw;
	box-sizing: border-box;
	padding: 3vw;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 3.5vw;
}

/****************** 订单合计部分 ******************/
.wrapper .total {
	width: 100%;
	height: 14vw;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
}

.wrapper .total .total-left {
	flex: 2;
	background-color: #505051;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .total .total-right {
	flex: 1;
	background-color: #38CA73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
